<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <body>

        <ui:composition template="./templates/all.xhtml">

            <ui:define name="title">
                Choose users to chat with
            </ui:define>

            <ui:define name="top">
                top
            </ui:define>

            <ui:define name="left">
                left
            </ui:define>

            <ui:define name="right">
                right
            </ui:define>

            <ui:define name="content">
                <h:form id="f">
                    <p:inputText value="#{searchMB.searchFor}" />
                    <p:commandButton action="#{searchMB.search}" value="search" update="panelGrid"/>
                    <p:ajaxStatus style="float: right;" >
                        <f:facet name="start">
                            <h:graphicImage height="25" width="25" value="images/ajax-loader.gif" />  
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value=""/>
                        </f:facet>
                    </p:ajaxStatus>
                    <br/>
                    <div style="width:800px; background-color: red;float: left;">
                        <p:dataGrid style="width:99%" paginatorTemplate=" {PreviousPageLink} {NextPageLink} "
                                    id="panelGrid" var="user" value="#{searchMB.foundUsers}"
                                    columns="4" paginator="true" paginatorAlwaysVisible="false" 
                                    rows="24" paginatorPosition="bottom" emptyMessage="No Results !">
                            <p:column>
                                <table border="0" style="width:200px; height:50px;">
                                    <tr>
                                        <td rowspan="3">
                                            <p:commandLink action="#{searchMB.select(user)}" update=":f2,:f" >
                                                <p:graphicImage value="#{user.tof}" width="50px" height="50px" />
                                            </p:commandLink>
                                        </td>
                                        <td>
                                            <p:commandLink action="#{searchMB.select(user)}" update=":f2,:f" value="#{user.firstname} #{user.lastname}" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h:outputText value="#{user.city}, #{user.country}" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h:outputText value="#{user.age} ans" />
                                        </td>
                                    </tr>
                                </table>
                            </p:column>
                        </p:dataGrid>
                    </div>
                </h:form>
                <h:form id="f2">
                    <div id="selectedU" style="float: left; width:200px; border: 0px solid red; margin-left: 50px"> 
                        <table border="0">
                            <c:forEach items="#{searchMB.selectedUsers}" var="u">
                                <tr>
                                    <td><img src="#{u.tof}" width="25" height="25" /></td>
                                    <td title="#{u.mail}">#{u.firstname} #{u.lastname}</td>
                                </tr>
                            </c:forEach>
                            <tr>
                                <td colspan="2">
                                    <p:commandLink ajax="false" value="Chat with this list" action="#{chatMB.startChating(searchMB.selectedUsers)}" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="clear: both"></div>
                </h:form>
            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>
        </ui:composition>

    </body>
</html>
